<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>动态表格测试页面</title>
		
	<script type="text/javascript" src="<%=path %>/includes/styleBase/js/jquery.js"></script>
	<script type="text/javascript" src="<%=path %>/includes/styleBase/js/style.js"></script>
	<script>
	
	
	    //动态加载表格
	    function loadTable(tableName,http,tableDefine){
	        $.ajax({
					type:"POST",
					url:http,
					error:function(msg)
					{
						alert("操作失败，请重试！"+msg);
					},
				    success:function(data)
				    {
				    	var data = eval("("+data+")");
				    	$("#"+tableName).find("tr").each(function(i){
				    	    if(i!=0){
						    	$(this).find("td").each(function(j){
						    	    if(i<data.length){
						    	    	if(j<tableDefine.length){
						    	    	    if(tableDefine[j].render!=null){
						    	    	    	$(this).html(tableDefine[j].render(data[i]));
						    	    	    }else{
						    	    	    	$(this).html(data[i][tableDefine[j].colname]);
						    	    	    }
						    	    	}
						    	    }
						    	});
					    	}
					    });
					}
				});
	    }
	    
	    
	    
	    
	    //查看详细信息函数
	    function viewInfo(unitid){
	    	alert("单位ID："+unitid);
	    }
	    
	    //自定义表格TD中内容实现函数
	    function viewInfoHtml(rowData){
	    	return '<a href="#2012"  onclick="viewInfo(\''+rowData.unitid+'\')">'+rowData.item_9+'</a>';
	    }
	    
	
		//初始化列表方法
		$(function()
		{
		    //定义动态表格要显示的字段  colname 为字段名
		    //可自定义表格TD中的内容,通过 render 设置生成自定义内容的函数名
		    //注意colname一定都要统一写成小写
			var tableDefine = 
				[
					{colname: 'item_9', render : viewInfoHtml},
					{colname: 'item_37'},
					{colname: 'item_39'},
					{colname: 'item_60'}
				];
			//后台处理程序url
	    	var http = "<%=path%>/back/UserNeedsManage?method=testFillTable";
			loadTable("table1",http,tableDefine);
			
			
			var tableDefine2 = 
				[
					{colname: 'item_60', render : viewInfoHtml},
					{colname: 'item_60'},
					{colname: 'item_60'},
					{colname: 'item_60'}
				];
	    	var http2 = "<%=path%>/back/UserNeedsManage?method=testFillTable";
			loadTable("table2",http2,tableDefine2);
		});
	</script>
	</head>
	<body>
		<div style="width:500px;">
			
			<table width="100%" id="table1" cellpadding="0" cellspacing="0" border="1">
				<tr>
					<td width="">单位名称22</td>
					<td width="">单位地址22</td>
					<td width="">联系电话</td>
					<td width="">sdf</td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
			</table>
			
			<br/>
			<table width="100%" id="table2" cellpadding="0" cellspacing="0" border="1">
				<tr>
					<td width="">单位名称22</td>
					<td width="">单位地址22</td>
					<td width="">联系电话</td>
					<td width="">sdf</td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
				<tr>
					<td width=""></td>
					<td width=""></td>
					<td width=""></td><td width=""></td>
				</tr>
			</table>
		</div>
	</body>
</html>

